<template>
  <view class="container">
    <view class="ver-layout top-layout">
      <view class="title-view">排行榜</view>
      <view class="ver-layout-center" style="margin-top:30px;color: white">
        <view class="my-value">我的排名：{{ getMyRank.index }}</view>
        <view class="my-value">我的分数：{{ getMyRank.uTotalScore }}</view>
        <view class="my-value">我的用时：{{ getMyRank.useTime }}</view>
      </view>
    </view>
    <view class="bottom-layout">
      <view class="hor-layout-side rank-title">
        <view class="rank-value">姓名</view>
        <view class="rank-value">手机号</view>
        <view class="rank-value">分数</view>
        <view class="rank-value">用时</view>
        <view class="rank-value">排名</view>
      </view>
      <view v-for="(item,index) in rankList" :key="index" class="hor-layout-side rank-item"
            :style="{color:item.myExam?'blue':''}">
        <view class="rank-value">{{ item.username }}</view>
        <view class="rank-value">{{ item.mobile }}</view>
        <view class="rank-value">{{ item.uTotalScore }}</view>
        <view class="rank-value">{{ item.useTime }}</view>
        <view class="rank-value">
          <view v-if="index==0" class="rank-index rank-index-1">{{ item.index }}</view>
          <view v-else-if="index==1" class="rank-index rank-index-2">{{ item.index }}</view>
          <view v-else-if="index==2" class="rank-index rank-index-3">{{ item.index }}</view>
          <view v-else class="rank-index rank-index-n" :style="{fontSize:item.index>=100?'xx-small':'smaller'}">
            {{ item.index }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      rankList: []
    }
  },
  computed: {
    getMyRank() {
      let exam = this.rankList.find(exam => exam.myExam)
      console.log("getMyRank-exam", exam)
      return exam ? {...exam} : {index: '暂无', uTotalScore: '暂无', useTime: '暂无'}
    }
  },
  onLoad() {

  },
  onShow() {
    this.getRankList()
  },
  methods: {
    getRankList() {
      this.$request('exam/exam/getExamSort', {}).then(res => {
        // debugger
        let result = res.data
        console.log("result", result[0])
        if (result && result.length > 0) {
          this.rankList = result
        }
      }).catch(err => uni.showToast({title: err.message || "请求失败!"})
      )
    }
  }
}
</script>

<style scoped>
.container {
  height: 90vh;
}

.top-layout {
  height: 30%;
  background-image: linear-gradient(to bottom, #3E5DD2, #5593E0);
}

.my-value {
  margin-top: 5px;
  font-size: small;
  font-weight: bold
}

.bottom-layout {
  margin: 15px;
}

.rank-title {
  margin-top: 15px;
  font-weight: bold;
  padding-bottom: 10px;
}

.rank-value {
  flex: 1;
  display: flex;
  text-align: center;
  justify-content: center;
}

.rank-item {
  font-size: small;
  margin-top: 15px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #d9d9d9;
}

.rank-index {
  width: 25px;
  height: 25px;
  color: gray;
  display: block;
  font-size: small;
  line-height: 25px;
  text-align: center;
  background-image: url("http://v.bootstrapmb.com/2019/11/3b3ba6619/images/icon-body.png");
}

.rank-index-1 {
  color: white;
  background-position: -62px -27px;
}

.rank-index-2 {
  color: white;
  background-position: -62px 0;
}

.rank-index-3 {
  color: white;
  background-position: -28px -32px;
}

.rank-index-n {
  background-position: 0 -60px;
}

.title-view {
  margin-top: 30px;
  font-weight: bold;
  text-align: center;
  font-size: x-large;
  color: white;
}

.rank-view {
  color: white;
  margin-top: 10px;
  font-size: large;
}
</style>